<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/nor.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="js/flex.js">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <title>Document</title>

    <style>
    .headDom {
    position: relative;
    width: 15rem;
    height: 2rem;
    margin: 0 auto;
}
#headDownBg {
    display: block;
    width: 15rem;
}
.sn-nav-wrapper {
    width: 15rem;
    height: 3.6rem;
    margin: 0 auto;
}
.index-nav {
    position: relative;
    background: #FFDB47;
    width: 15rem;
    margin: 0 auto;
    z-index: 100;
    font-size: 0.48rem;
    line-height: 1.76rem;
    overflow: hidden;
}
.index-nav .index-nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 15rem;
    height: 3.6rem;
    overflow: hidden;
}
.index-nav .index-nav-bg img {
    position: absolute;
    bottom: 0;
    width: 15rem;
    height: 5.2rem;
}
.lazybox, .lazyimg img {
    background: 0;
}
.index-nav .type {
    position: relative;
    width: 15rem;
}
.index-nav .top-type {
    display: block;
}
.index-nav .type .content-wrap-one {
    width: 13.64rem;
    height: 1.76rem;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}
.index-nav .class {
    display: block;
    width: 0.72rem;
    height: 1.2rem;
}
.index-nav .top-wrapper.middle-style {
    justify-content: center;
}
.index-nav .top-wrapper {
    display: flex;
    width: 11.4rem;
    height: 1.76rem;
    align-items: center;
}
.index-nav .aa-img {
    width: 7.8rem;
    height: 1.52rem;
}
.lazybox, .lazyimg img {
    background: 0;
}
.index-nav .logbtn {
    width: 0.72rem;
    height: 1.2rem;
    text-align: center;
}
.index-nav .logbtn .logImg {
    display: block;
}
.index-nav .logbtn img {
    width: 0.72rem;
    height: 1.2rem;
}
.lazybox, .lazyimg img {
    background: 0;
}
.index-nav .logbtn .logPic {
    display: none;
}
.index-nav .type .content-wrap-two {
    width: 15rem;
    height: 1.84rem;
    box-sizing: border-box;
    padding: 0 .48rem;
}
.wbox-flex {
    -webkit-flex: 1!important;
    -webkit-box-flex: 1;
}
.pr {
    position: relative;
}
.footer li, .line-clamp-2, .of, .wb, .wbox-flex {
    word-wrap: break-word;
    word-break: break-all;
}

.search-bar a.search {
    display: block;
    position: absolute;
    height: 1.76rem;
    width: 100%;
    z-index: 10;
}
.search-icon {
    position: absolute;
    width: .72rem;
    height: .72rem;
    top: .56rem;
    left: .4rem;
    background-image: url("img/放大镜.png");
    background-size: .72rem .72rem;
}
em, i {
    font-style: normal;
}
*, .bbox, .layout, div, p {
    -webkit-box-sizing: border-box;
}
.search-bar form {
    height: 1.76rem;
}
.search-bar input {
    border: none;
    -webkit-border-radius: .6rem;
    padding: 0.06rem 0.4rem 0 1.3rem;
    width: 100%;
    height: 1.28rem;
    line-height: 1.28rem;
    background: #FFF;
    font-size: .56rem;
    color: #999999;
    -webkit-appearance: none;
}
img, input {
    vertical-align: middle;
}
*, .bbox, .layout, div, p {
    -webkit-box-sizing: border-box;
}
.form .search input {
  outline: none;
  width: 100%;
  border: 0;
  height: 1.32rem;
  border-radius: 0.66rem;
  background-color: #FFF2CC;
  margin-top: 0.24rem;
  font-size: 0.5rem;
  padding-left: 1.1rem;
  color: #757575;
}
.index-wrap {
    position: relative;
    width: 15rem;
    margin: 0 auto;
}
.f-l-o-a-t-s-a-l-e .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}
.v7-banner {
    position: relative;
    height: 4.58rem;
}
.v7-banner .banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.58rem;
}
.v7-banner .swipe-wrapper {
    position: absolute;
    width: 14.04rem;
    height: 4.58rem;
    top: 0;
    left: .48rem;
}
.v7-banner .swipe-wrapper .swipe {
    height: 4.58rem;
}
.swipe {
    position: relative;
    overflow: hidden;
}
.w {
    margin: 0 auto;
    max-width: 15rem;
}
.v7-banner .swipe-ul {
    position: absolute;
    top: 0;
    left: 0;
}
.swipe .swipe-ul {
    margin: 0;
    overflow: hidden;
    width: 120rem;
}
.v7-banner .swipe-ul div {
    position: relative;
    width: 14.04rem;
    height: 4.58rem;
    border-radius: .48rem;
    overflow: hidden;
}
.swipe div{
    position: relative;
    float: left;
    overflow: hidden;
}
.v7-banner div{
    display: block;
    width:14.04rem;
    height: 4.58rem;
}
.v7-banner div img{
    position: absolute;
    bottom: 0;
    width: 15rem;
    height: 7.36rem;
}
.swipe img{
    width: 100%;
    max-width: 15rem;
}

.enter-list .trigger {
    position: relative;
    width: 15rem;
    height: .24rem;
    line-height: 0.12rem;
    text-align: center;
    margin-top: 0.32rem;
}

.newImgFloor {
    display: none;
    width: 15rem;
    height: 4.68rem;
    margin: .48rem auto 0;
    justify-content: space-between;
}
.g-new-floor {
    display: none;
}
.newImgFloor .newImgFloor-content {
    display: -webkit-flex;
    display: flex;
    width: 15rem;
    height: 4.68rem;
}
.aas {
    width: 6.5rem;
}
.newImgFloor .newItem {
    display: block;
    width: 3.74rem;
    height: 4.68rem;
}
.aas img {
    width: 7.5rem;
}
.newImgFloor .newItem img {
    display: block;
  width: 3.74rem;
    height: 4.68rem;
}
.qqqw {
    width: 2px;
    height: 100%;
    line-height: 0;
    background: #f2f2f2;
}

.newImgFloor .newItem {
    display: block;
    width: 3.74rem;
    height: 4.68rem;
}
.newImgFloor .newItem img {
    display: block;
    width: 3.74rem;
    height: 4.68rem;
}

.v7-tab {
    box-sizing: content-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 15rem;
    height: 2rem;
    z-index: 199;
    border-top: 1px solid #EEE;
    background: #FFF;
    transition: all .2s linear;
}
.hor-view {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.v7-tab a {
    position: relative;
    display: block;
    width: 3rem;
    height: 2rem;
    background: #fff;
}
.v7-tab img {
    display: block;
    width: .96rem;
    height: .96rem;
    margin: .24rem auto 0;
}
.v7-tab .guess {
    display: block;
}
.v7-tab .index {
    display: none;
}
.v7-tab .cur span {
    color: #000000;
    font-weight: bold;
}
.v7-tab .guess {
    display: block;
}
.v7-tab span {
    display: block;
    font-size: 0.4rem;
    line-height: .64rem;
    color: #666;
    text-align: center;
}
    </style>
</head>

<body>
    <!--导航栏窗格-->
    <div class="headDom"><img id="headDownBg" src="./img/导航栏.jpg"></div>

   <!--分类  我的-->

   <div class="su-nav-wrapper"> 
       <div class="index-nav">
           <div class="index-nav-bg">
               <img src="./img/9.png">
           </div>
           <div class="type top-type">
               <div class="content-wrap-one">
                   <a class="class"><img src="./img/分类.png"></a>
                   <div class="top-wrapper.middle-style">
                    <a sap-expo="true">  <img src="./img/banner1.gif" class="aa-img">   </a>
                   </div>
                   <a href="javascript:;" name="index-none-header-syd1" class="logbtn myBtnNoLogin" sap-expo="true">
                       <img class="logImg"src="./img/登录.png">
                       <img class="logPic"src="./img/登录.png">
                   </a>
               </div>
              <!--搜索框-->
               <div class="content-wrap-two">
                   <div class="wbox-flex search-bar pr">
                       <a name="index-none-header-sysc" class="search"></a>
                       <i class="search-icon"></i>
                       <form>
                           <input class="searchInput" name="index-none-header-sysc" type="text" placeholder="抢多款电脑千元神券" autocomplete="off">
                       </form>
                   </div>
               </div>
           </div>
       </div>
   </div>

   <!--轮播图-->
<div class="index-wrap">
<div class="overlay"></div>
   <div class="v7-banner" sap-modid="11345629858">
     <img src="./img/10.png" class="banner-bg">
     <div class="swipe-wrapper">
    <div class="swipe w" style="visibility:visible;">

        <div class="swipe-ul" style="width: 4043.5px;">
           <div data-index="0">
               <div sap-expo="true">
                
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./images/轮播图1.jpg"></div>
                    </div>
                    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
                </div>
                
                <style type="text/css">
                  .swiper-container{
                    --swiper-theme-color: #ff6600;
                    --swiper-pagination-color: #00ff33;/* 两种都可以 */
                  }
                </style>
               </div>


               
            </div>
        </div>
    </div>
  </div>
   </div>
</div>


    <nav>
        <a href="#">
            <img src="./images/限时秒杀.png" alt="">
            <span>天天低价</span>
        </a>
        <a href="#">
            <img src="./images/苏宁超市.png" alt="">
            <span>苏宁超市</span>
        </a>
        <a href="#">
            <img src="./images/苏宁拼购.png" alt="">
            <span>苏宁拼购</span>
        </a>
        <a href="#">
            <img src="./images/3D数码.png" alt="">
            <span>3D数码</span>
        </a>
        <a href="#">
            <img src="./images/苏宁家电.png" alt="">
            <span>苏宁家电</span>
        </a>
        <a href="#">
            <img src="./images/免费水果.png" alt="">
            <span>免费水果</span>
        </a>
        <a href="#">
            <img src="./images/super会员.png" alt="">
            <span>super会员</span>
        </a>
        <a href="#">
            <img src="./images/签到有礼.png" alt="">
            <span>签到有礼</span>
        </a>
        <a href="#">
            <img src="./images/领券中心.png" alt="">
            <span>领卷中心</span>
        </a>
        <a href="#">
            <img src="./images/更多频道.png" alt="">
            <span>更多频道</span>
        </a>

    </nav>
    <ul class="trigger"></ul>
<div  class="newImgFloor g-new-floor" style="display: block;  transform-origin: 0px 0px;opacity: 1; transform: scale(1,1);">
   <div class="newImgFloor-content">
  <a class="aas">
      <img data-src1="" src="./img/新人大礼包.png">
  </a>
  <div class="qqqw"></div>
  <a class="newItem newItem2" sap-expo="true">
    <img src="./img/一分包邮.gif">
    </a>
    <div class="qqqw"></div>
    <a class="newItem newItem3" sap-expo="true">
        <img src="./img/一分包邮.gif">
        </a>
   </div>
</div>

<!--下方导航栏-->
 <div class="v7-tab hor-view">
  <a href="javascript:;" class="cur goto-btn" sap-expo="true">
      <img src="./img/猜你喜欢.png" class="guess opa1">
      <img src="./img/首页.png" class="index opa1">
      <span class="guess">猜你喜欢</span>
      <span class="index">首页</span>
  </a>
  <a>
     <img src="./img/搜索.png" class="opa1"> 
     <span>分类</span>
  </a>
  <a>
    <img src="./img/排行榜.png" class="opa1"> 
    <span>排行榜</span>
  </a>
  <a>
      <img src="./img/购物车.png" class="opa1">
      <span>购物车</span>
  </a>
  <a>
      <img src="./img/我的易购.png" class="opa1">
      <span>我的易购</span>
  </a>
 </div>




    <script src="./js/swiper.min.js"></script>
    <script language="javascript"> 
        var mySwiper = new Swiper('.swiper-container',{
        pagination: {
            el: '.swiper-pagination',
          },
        })
        </script>
</body>

</html>